<template>
  <div class="big">
      <div class="content" >
          <div v-for="(item,i) in content" :key="i" v-html="item.content"></div>
      </div>
      <div class="channels flex">
          <div class="channel" v-for="(item,i) in list" :key="i" @click="channeldetail(item.id)">
            {{ item.name }}
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { mapGetters } from 'vuex'
import { jstChannelList ,myNotice} from '../api/erp/Notice'
export default {
    name:'Notice',
    data() {
        return {
            list:[],
            content:[],
            user:{}
        }
    },
    created() {
        this.jstChannelList()
        this.user = this.$store.state.user.user
        this.myNotice()
        window.setInterval(() => {
          this.myNotice()
        }, 1000*60*5)
    },
    methods: {
        myNotice(){
          const config={
            url: 'api/sysNotice/myNotice',
            methods: 'get',
            params: {
              size:9999,
              page:1,
              userId:this.user.userId,
              deptId:this.user.deptId
            }
          }
          
              request(config).then((res)=>{
                console.log(res,'内容');
                this.content=res.data.content
              })
          
        },
        jstChannelList(){
            jstChannelList().then((res)=>{
                this.list=res.content
            })
        },
        channeldetail(id){
            this.$router.push({path:`/jst/jstChannelGoods/?${id}`})
        }
    },

}
</script>

<style lang="scss" scoped>
    .big{
        height: 85vh;
        padding: 10px;
        .content{
            width: 100%;
            height: 90%;
            overflow-y: auto;
            // background-color: red;
            border: 1px solid rgb(213,213,213);
        }
        .channels{
            height: 10%;
            flex-wrap: wrap;
            align-items: center;
            .channel{
                margin: 10px;
                padding: 10px;
                flex-shrink: 0;
                // background-color: red;
                border: 1px solid #d5d5d5;
            }
        }
    }
</style>
